<script setup>

import { RouterView,RouterLink } from 'vue-router'

import { useRouter } from 'vue-router'
const router = useRouter()
const logout = () => {
  // 退出登录
  console.log('退出登录')
  localStorage.removeItem('isLogin')
  router.push('/')
}

</script>

<template>
 <!-- 主页  -->
  <div class="header">
    <h3>顶部菜单</h3>
    <button @click="logout">退出</button>
  </div>
  <div class="container">
    <div class="left">
      <RouterLink to="/lists">商品列表</RouterLink>
      <RouterLink to="/add">添加商品</RouterLink>
    </div>
    <div class="right">
      
      <RouterView></RouterView>
    </div>
  </div>

</template>

<style scoped>
.header{
  display: flex;
  width: 100%;
  height: 50px;
  background-color: #dadae1;
  border: 1px solid #ccc;
  justify-content: center;
  align-items: center;
}
.header button{
  position: absolute;
  right: 20px;
  padding: 0 15px;
  border-radius: 10px;
  border:1px solid #d70022;
  background-color: #d70022;
  color: white;
}
.container{
  display: flex;
}
.left{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 150px;
  border: 1px solid black;
  padding: 10px;
}
.left a{
  border: 1px solid black;
  font-size: 16px;
  text-decoration: none;
  color: black;
  text-align: center;
}
.right{
  border: 1px solid black;
  width: 100%;
  padding: 20px;
}

</style>
